<template>
    <view class="demo-main-box">
        <view :style="imageStyle">
            <image :src="clipsrc" :style="imageStyle"></image>
        </view>
        <button @click="select" v-if="!src">选择头像</button>
        <!-- src 为选取的图片地址 v-if 是为了销毁组件 size是裁剪后输出图片的宽高 @cancel这个是为了配合销毁 rectScale 是裁剪选区的屏占比,会自动适配 -->
        <reaee-image-clip :src="src" v-if="src" @ok="ok" :size="size" @cancel="src = false" :rectScale="0.5"></reaee-image-clip>
    </view>
</template>

<script>
export default {
    data() {
        return {
            src: '',
            clipsrc: '',
            size: {
                width: 500,
                height: 500
            }
        };
    },
    computed: {
        imageStyle() {
            return {
                width: this.size.width + 'rpx',
                height: this.size.height + 'rpx',
            };
        }
    },
    onLoad(options) {
        this.src = options.src || '';
    },
    methods: {
        select() {
            uni.chooseImage({ count: 1 }).then(res => {
                this.src = res[1].tempFiles[0].path;
            });
        },
        ok(e) {
            // this.src = '';
            // this.clipsrc = e;
            uni.setStorageSync('avatar_cropper', e);
            uni.navigateBack({
                delta: 1
            })
        },
        cancel() {
            uni.navigateBack({
                delta: 1
            })
        }
    }
};
</script>

<style >
    .demo-main-box {
        background-color: #efefef;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        width: 100vw;
        height: 100vh;
    }
</style>